<template>
  <div class="home">
    <div class="content">
      <!-- 头部区域 -->
      <div class="header">
        <span>外卖</span>
        <div class="location">
          <van-icon name="location" />
          广州
        </div>
      </div>
      <!-- 主体内容 -->
      <div class="main">
        <div class="main-bg">
          <!-- 搜素框 -->
          <div class="search">
            <input type="text" />
            <div class="search-text">搜索</div>
          </div>
          <!-- 分类 -->
          <div class="sort">
            <div class="big-sort">
              <div v-for="(item, index) in big_sort" :key="index">
                <svg class="icon" aria-hidden="true">
                  <use :xlink:href="`#${item.icon}`"></use>
                </svg>
                {{ item.name }}
              </div>
            </div>
            <div class="small-sort">
              <div v-for="(item, index) in small_sort" :key="index">
                <svg class="icon" aria-hidden="true">
                  <use :xlink:href="`#${item.icon}`"></use>
                </svg>
                {{ item.name }}
              </div>
            </div>
          </div>
        </div>
        <div class="tabs">
          <van-tabs v-model:active="active" class="van-tabs" color="#ffc400">
            <van-tab  
            v-for="(item, index) in content_van_tabs" 
            :key="index"
            :title="item.tab"
            >
              <nav-list :navList='item.data' />
            </van-tab>
          </van-tabs>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script>
import Footer from "@/components/Footer.vue";
import NavList from './components/NavList.vue'
import { reactive, toRefs,ref } from "@vue/reactivity";

export default {
  components: { Footer,NavList },
  setup() {
    const active = ref(0);
    const data = reactive({
      big_sort: [
        { name: "美食", icon: "icon-meishi" },
        { name: "甜点饮品", icon: "icon-tiandian" },
        { name: "超市便利", icon: "icon-chaoshigouwu" },
        { name: "生鲜果蔬", icon: "icon-juzi" },
        { name: "买药", icon: "icon-zhichiyiyuanyaodian" },
      ],
      small_sort: [
        { name: "午餐", icon: "icon-wucan" },
        { name: "买酒", icon: "icon-jiu" },
        { name: "新鲜水果", icon: "icon-shuiguo" },
        { name: "汉堡披萨", icon: "icon-hanbao" },
        { name: "休闲饮品", icon: "icon-xiuxianyinpin" },
        { name: "夜宵", icon: "icon-yexiao" },
        { name: "吐司", icon: "icon-tusi" },
        { name: "跑腿", icon: "icon-paotuiAPP" },
        { name: "美人佳丽", icon: "icon-kouhong" },
        { name: "全部分类", icon: "icon-fenlei" },
      ],
      content_van_tabs:[
        {
          tab: "天天神券",
          data: [
            {
              pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
              title: "酸菜鱼",
              sales: "2888",
              price: "20",
              label: ["门店上新", "很下饭"],
            },
            {
              pic: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.cfcy168.com%2FUploadFiles%2F2020%2F2%2F15904074889874037.jpg&refer=http%3A%2F%2Fwww.cfcy168.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645421933&t=66b58fbba9dce6f6b397e38820de24dc",
              title: "隆江猪脚饭",
              sales: "2888",
              price: "20",
              label: ["门店上新", "很下饭"],
            },
            {
              pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
              title: "酸菜鱼",
              sales: "2888",
              price: "20",
              label: ["门店上新", "很下饭"],
            },
            {
              pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
              title: "酸菜鱼",
              sales: "2888",
              price: "20",
              label: ["门店上新", "很下饭"],
            },
          ],
        },
        {
          tab: "减配送费",
          data: [
            {
              pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
              title: "酸菜鱼",
              sales: "2888",
              price: "20",
              label: ["门店上新", "很下饭"],
            },
          ],
        },
        {
          tab: "点评高分",
          data: [
            {
              pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
              title: "酸菜鱼",
              sales: "2888",
              price: "20",
              label: ["门店上新", "很下饭"],
            },
            {
              pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
              title: "酸菜鱼",
              sales: "2888",
              price: "20",
              label: ["门店上新", "很下饭"],
            },
          ],
        },
        {
          tab: "会员满减",
          data: [
            {
              pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
              title: "酸菜鱼",
              sales: "2888",
              price: "20",
              label: ["门店上新", "很下饭"],
            },
            {
              pic: "https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440",
              title: "酸菜鱼",
              sales: "2888",
              price: "20",
              label: ["门店上新", "很下饭"],
            },
          ],
        },
      ]
    });
    return {
      ...toRefs(data),
      active
    };
  },
};
</script>

<style lang="less" scoped>
.home {
  display: flex;
  flex-flow: column;
  height: 100%;
  font-size: 12px;
  .content {
    flex: 1;
    overflow-y: auto;
  }
  .header {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    // align-items: center;
    height: 100px;
    width: 100%;
    background-image: linear-gradient(#ffc400, #fff);
    padding: 20px 10px 10px 10px;
    .location {
      font-size: 12px;
      padding-top: 15px;
    }
    span {
      font-size: 25px;
    }
  }
  .main {
    margin-top: -30px;
    .main-bg {
      background-image: linear-gradient(#fff, #f5f5f5f5);
      border-radius: 30px 30px 0 0;
      padding: 10px 20px 0 20px;

      .search {
        box-sizing: border-box;
        position: relative;
        input {
          height: 30px;
          width: 100%;
          border: #ffc400 1px solid;
          border-radius: 20px;
          font-size: 15px;
          // padding-left:10px;
        }
        .search-text {
          width: 50px;
          height: 30px;
          position: absolute;
          right: -4px;
          top: 3.6px;
          background-color: #ffc400;
          border-radius: 20px;
          font-size: 12px;
          text-align: center;
          line-height: 30px;
        }
      }
      .sort {
        padding: 10px 10px 0 10px;
        .big-sort {
          display: flex;
          div {
            flex: 1;
            display: flex;
            flex-flow: column;
            justify-content: center;
            align-items: center;
            .icon {
              width: 50px;
              height: 50px;
            }
          }
        }
        .small-sort {
          display: flex;
          flex-wrap: wrap;
          margin-top: 10px;
          div {
            width: 20%;
            display: flex;
            flex-flow: column;
            justify-content: center;
            align-items: center;
            .icon {
              width: 30px;
              height: 30px;
              margin-top: 10px;
            }
          }
        }
      }
    }
    .tabs{
      .van-tabs{
        margin-top: 20px;
        padding: 0 20px 10px;
      }
     /deep/ .van-tabs__wrap{
        border-radius: 15px;
        
      }
    }
  }
}
</style>